<template>
    <div style="background: #f5f5f5;">
      <div class="cardBodys">
        <div class="cardBox">
          <img :src="image.image" alt="">
        </div>
        <div class="card">
          <div class="promise" v-for="(v,i) in card" :key="i">
            <div class="proBox">
              <p class="title">{{v.title}}</p>
              <p class="content">{{v.content}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
  import request from '../request/index'
    export default {
        name: "blackCardVip",
      data(){
        return{
          page:1,
          data:[],
          image:[],
          card:[],
          discount:[],
          goods_list:[]
        }
      },
      created(){
        request.getUserCard(this);
      },
      mounted(){
          document.title = '黑卡会员'
      }
    }
</script>

<style scoped lang="scss">
.cardBodys{
  width: 92vw;
  height: auto;
  margin: 0px auto;
    .cardBox{
      width: 92vw;
      margin-top: 4vw;
      box-shadow:0px 2.4vw 6.6vw 0px rgba(118,118,118,0.4);
      height: 48vw;

      -webkit-border-radius:3vw;
      -moz-border-radius: 3vw;
      border-radius:3vw;
    }
  .card{
    width: 92vw;
  }
  .promise{
    width:44vw;
    margin-top: 4vw;
    box-shadow:0px 2px 4px 0px rgba(118,118,118,0.2);
    padding-top: 4vw;
    box-sizing: border-box;
      .proBox{
        width: 44vw;
        height: 44vw;
        background: #fff;
        display: inline-block;
        .content{
          margin: 2vw;
          color: #666;
          font-size: 15px;
          text-align: center;
        }
        .title{
          font-size: 18px;
          color: #ff4c50;
          text-align: center;
        }
      }
  }
}
.promise:nth-child(1),.promise:nth-child(3){
  float: left;
}
.promise:nth-child(2),.promise:nth-child(4){
  float: right;
  margin-left: 4vw;
}
</style>
